// 头部 搜索
var searchInput = document.querySelector('.search input');
var searchLi = document.querySelector('.search-list');
searchInput.onfocus = function(){
    searchLi.style.borderColor = '#10c55b';
}
searchInput.onblur = function(){
    searchLi.style.borderColor = '#999';
}

// 轮播图
var banner = document.querySelector('.banner');
var imgLis = document.querySelectorAll('.banner .img-list li');
var indicators = document.querySelectorAll('.banner .indicator li');
var prev = document.querySelector('.banner .prev');
var next = document.querySelector('.banner .next');

var index = 0;//记录当前图片的索引值

var bgColorArr = ['#060606','#feff0f','#fdf100','#2c9bff','#89dce3','#fef8b3','#110204','#f4cad8'];
function showImg(){
    for(var i = 0; i < imgLis.length; i++){
        // 先把所有图片隐藏，所有指示灯的背景去掉
        imgLis[i].className = '';
        indicators[i].className = '';
    }
    console.log(index);
    // 根据index的值，来显示图片和改变指示灯，banner的背景
    imgLis[index].className = 'current';
    indicators[index].className = 'active';
    banner.style.backgroundColor = bgColorArr[index];
}
// 上一张
function prevImg(){
    index = index==0 ? imgLis.length-1 : index-1;
    showImg();
}
function nextImg(){
    index = index==imgLis.length-1 ? 0 : index+1;
    showImg();
}


// 1.自动切换
var timer = setInterval(nextImg,1000);

// 鼠标进入容器，自动切换停下来
banner.onmouseover = function(){
    clearInterval(timer);
    timer = null;
    prev.style.display = 'block';
    next.style.display = 'block';
}
banner.onmouseout = function(){
    prev.style.display = 'none';
    next.style.display = 'none';
    if (timer != null) {
        // 定时器已经开启，不要重复开启
        return;
    }
    timer = setInterval(nextImg,1000);
}

// 2.点击指示灯切换图片
for(var i = 0; i < indicators.length; i++){
    indicators[i].index = i;
    indicators[i].onclick = function(){
        index = this.index;
        showImg();
    }
}

// 3.手动点击按钮切换
prev.onclick = function(){
    prevImg();
}
next.onclick = function(){
    nextImg();
}

